<template>
  <div class="login-container">
    <!-- 导航栏 -->
    <van-nav-bar class="page-nav-bar" title="签到" />
    <!-- /导航栏 -->
    <van-form @submit="onSubmit">
     <div class="page">
        <div class="sign-in-page">
            <div class="sign-in-wrap">
              <div class="page-list">
                  <div class="top-bg">
                      <img src='/static/img/exam/back.png'/>
                  </div>
                  <div class="page-mess">
                      <div class="page-mess-cont">

                              <div class="info-left">
                                  <img src="/static/img/exam/signPic.png"/>
                                  <br/>
                                  <span class="name">{{ examinerName }}</span>
                              </div>
                              <div class="info-right">
                                  <div>考试：<span>{{grantName}}</span></div>
                                  <div>考点：<span>{{ pointName }}</span></div>
                                  <div>场次：<span>{{ sceneName }}</span></div>
                                  <div>考场：<span>{{ examRoom }}</span></div>
                                  <div>地址：<span>{{ roomAddr }}</span></div>
                              </div>
                        <hr/><br>
                              <div style="text-align: center"><span style="font-size: 24px">{{ signStatus }}</span></div>
                      </div>
                  </div>
                  <div class="sign-top">
                      <div class="sign-btn">
                          <button class="fancy-button bg-gradient1" id="submit_btn" >
                              <span id="signText">签到</span><br/>
                              <span id="timetxt"></span>
                          </button>
                          <span style="display:block;font-size: 15px;margin: 15px 0;"></span>
                      </div>
                  </div>
              </div>
          </div>
      </div>
    </div>
    </van-form>
    <!-- /登录表单 -->
    <!--弹出框，赋予chargeBtn事件-->
    <van-dialog
      v-model="showIdcardInput"
      title="请输入证件号码"
      :beforeClose="beforeClose"
      :confirm="setIdcardConfirm"
    >
      <!--输入框-->
      <van-field
        v-model="idCard"
        rows="1"
        autosize
        type="text"
        placeholder="请输入证件号码"
      />
    </van-dialog>

  </div>
</template>
<script>
function getUrlKey(name){//获取url 参数

  return decodeURIComponent((new RegExp('[?|&]'+name+'='+'([^&;]+?)(&|#|;|$)').exec(location.href)||[,""])[1].replace(/\+/g,'%20'))||null;

}

function getCodeApi(state){//获取code

  let urlNow=encodeURIComponent(window.location.href);

  let scope='snsapi_base'; //snsapi_userinfo //静默授权 用户无感知

  let appid='wx304b179d66268e6b';
  appid = 'wx8c5a10694bf703f1';
  var num=Math.floor(Math.random()*10000+1);
  let url=`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${urlNow}&response_type=code&scope=${scope}&state=${state}&no=${num}#wechat_redirect`;
  window.location.replace(url);

}

import Vue from 'vue';
import {getExaminerSceneInfoForIdcard,getExaminerSceneInfoForOpenid , examinerSign} from "@/api/grantexaminer/grantexaminer"
import { getCodeImg ,getOpenId } from "@/api/login";
import { getDicts,updGrExaminer } from "@/api/grantexaminer/grantexaminer";
import { Dialog,Field } from 'vant';
Vue.use(Dialog);
Vue.use(Field);
export default {
  name: 'LoginIndex',
  components: {},
  props: {},
  data () {
    return {
      showIdcardInput: true,
      idCard: undefined,
      grantId: undefined,
      sceneId: undefined,
      examinerName: undefined,
      grantName: undefined,
      pointName: undefined,
      sceneName: undefined,
      examRoom: undefined,
      roomAddr: undefined,
      signStatus: '未签到',
      openId: undefined
    }
  },
  computed: {},
  watch: {},
  created () {

    //grantId  sceneId
    this.grantId = this.$route.query.grantId ? this.$route.query.grantId : undefined
    this.sceneId = this.$route.query.sceneId ? this.$route.query.sceneId : undefined
    if (this.grantId === undefined || this.sceneId === undefined) {
      this.$toast.fail({
        message: '末传入签到信息，无法进行下一步操作',
        forbidClick: true, // 禁用背景点击
        duration: 0 // 持续时间，默认 2000，0 表示持续展示不关闭
      });
    }
    let userAgent = this.isAlipayOrWechat();
    if ("wechat" === userAgent) {
      let code=getUrlKey("code");//获取url参数code
      if(code) { //拿到code， code传递给后台接口换取opend
        let that = this;
        if(this.openId===undefined)
        {
          getOpenId(code).then(res=>{
            if(res.code==200){
              this.openId = res.msg;
              this.weixinLogin();
            }else{
            }
          }).catch(err=>{
            console.log(err);
          })
        }else {
          this.weixinLogin();
        }
      }else{
        getCodeApi("_wx");
      }
    }

  },
  mounted () {},
  methods: {
    weixinLogin(){
      let sceneQuery = {};
      sceneQuery['grantId'] = this.grantId;
      sceneQuery['sceneId'] = this.sceneId;
      sceneQuery['openId'] = this.openId;
      getExaminerSceneInfoForOpenid(sceneQuery).then(res=>{
        this.examinerName = res.data.examinerIdText;
        this.grantName = res.data.grantName;
        this.pointName = res.data.examPointIdText;
        this.examRoom = res.data.examRoom;
        this.sceneName = res.data.sceneName;
        this.roomAddr = res.data.roomAddr;
        this.idCard = res.data.idCard;
        this.showIdcardInput = false;
        res.data.status==1?this.signStatus='已签到': this.signStatus='未签到';
      }).catch(err=>{
      })
    },
    isAlipayOrWechat(){
      var userAgent = window.navigator.userAgent.toLowerCase();

      if (userAgent.match(/Alipay/i) == "alipay") {

        //alert("支付宝浏览器");

        return "alipay";

      } else if (userAgent.match(/MicroMessenger/i) == "micromessenger") {

        // alert("微信浏览器");

        return "wechat";

      } else {    return "";  }
    },
    async onSubmit () {
      let sceneQuery = {};
      sceneQuery['grantId'] = this.grantId;
      sceneQuery['sceneId'] = this.sceneId;
      sceneQuery['idCard'] = this.idCard;
      examinerSign(sceneQuery).then(res=>{
        this.signStatus = "已签到";
        this.$toast.success("签到成功");
      }).catch(err=>{
        this.$toast.fail('签到失败');
      })
    },
    setIdcardConfirm(){

    },
    beforeClose(action,done){
      let sceneQuery = {};
      sceneQuery['grantId'] = this.grantId;
      sceneQuery['sceneId'] = this.sceneId;
      sceneQuery['idCard'] = this.idCard;
      getExaminerSceneInfoForIdcard(sceneQuery).then(res=>{
        this.examinerName = res.data.examinerIdText;
        this.grantName = res.data.grantName;
        this.pointName = res.data.examPointIdText;
        this.examRoom = res.data.examRoom;
        this.sceneName = res.data.sceneName;
        this.roomAddr = res.data.roomAddr;
        this.showIdcardInput = false;
        res.data.status==1?this.signStatus='已签到': this.signStatus='未签到';
        return true;
      }).catch(err=>{
        this.$toast.fail('未找到该人员的签到信息');
        done(false);
      })
    }
  }
}
</script>
<style scoped lang="less">
.sign-in-page {
            width: 100%;
            height: 100%;
        }

        .sign-in-page .sign-in-wrap {
            z-index: 1;
            position: relative;
            width: 100%;
            height: 100%;
        }

        .sign-in-page .page-list {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background: #fff;
            font-family: arial;
        }

        .top-bg {
            height: 216px;
            width: 100%;
            display: inline-block;
        }

        .top-bg img {
            width: 100%;
            height: 100%;
        }

        .sign-in-page .page-mess {
            position: absolute;
            /* left: 62px; */
            top: 100px;
            width: 96%;
            height: auto;
            z-index: 119;
            /* background: #fff; */
            /* border-radius: 6px; */
            color: #fff;
            background: url(/static/img/exam/navBg.png) no-repeat;
            background-size: 100% 100%;
            font-size: 15px;
            font-weight: 400;
            margin: 0 2%;
            border-radius: 7px;
        }

        .page-mess-cont {
            padding: 20px;
        }

        .sign-in-page .info-box {

        }

        .sign-in-page .page-mess .info-right, .sign-in-page .page-mess .info-left {
            display: inline-block;
            vertical-align: middle;
        }

        .sign-in-page .page-mess .info-right {
            line-height: 30px
        }

        .sign-in-page .page-mess .info-left img {
            width: 68px;
            height: 68px;
            border-radius: 160%;
            margin-right: 10px;
            vertical-align: middle !important;
        }

        .sign-in-page .page-mess .info-left .name {
            width: 68px;
            text-align: center;
            display: inline-block;
            margin-top: 8px;
        }

        .info-btn button {
            border-radius: 100px;
            padding: 8px 0;
            background-color: #F44336;
            color: #fff;
            border: 1px solid #F44336;
            width: 100%;
        }

        .info-btn button.gray {
            background-color: #eee;
            border: 1px solid gray;
            color: #c8c9cb;
        }

        .info-background {
            position: absolute;
            left: -20px;
            top: 233px;
            width: 680px;
            height: 686px;
            z-index: 105;
            display: block;
        }

        .sign-top {
            position: absolute;
            top: 350px;

            text-align: center;
            width: 100%;
        }

        .sign-top .sign-btn {
            display: inline-block;
            margin-top: 50px;
            /*width: 100px;
            height: 100px;*/
            text-align: center;
        }

        .sign-top .sign-btn button {
            width: 110px;
            height: 110px;
            /* border: 4px solid #fff; */
            border: 0;
            box-shadow: 0 0 25px #7fc2fd, 0 0 25px #add8fe;
            border-radius: 100%;
            background: #0088ff;
            color: #fff;
            font-size: 18px;
        }

        .sign-top .sign-btn .signed {
            border: 1px solid #fff;
            background: none;
            display: inline-block;
            padding: 8px 20px;
            text-align: center;
            border-radius: 50px;
            color: #fff;
            font-size: 18px;
            line-height: 18px;
            margin-top: 30px;
            margin-bottom: 10px;
        }

        .signed-box {
            display: none;
        }

        .sign-top .sign-btn .signed .sign-icon {
            display: inline-block;
            background: url(/static/img/exam/calendarIcon.png) no-repeat;
            width: 18px;
            height: 16px;
            background-size: 100% 100%;
            margin-right: 5px;
            margin-top: 2px;
        }

        .sign-top .sign-btn em {
            font-style: normal;
            color: #fff;
            display: inline-block;
            font-size: 16px;
        }
</style>
